Each .grid element is a horizontal row which can contain
.unit elements of various widths.
Width combinations are illustrated below.
Units get stacked on screens 568px or smaller.
Grids in a .wrap have maximum widths of 978px, or 1140px
with the addition of .wider.
All units have even inner and outer gutters.
You can turn gutters off with .no-gutters.
There are also a few other commonly needed classes.
.whole
.half
.half
.one-third
.two-thirds
.one-quarter
.three-quarters
.one-fifth
.four-fifths
.two-fifths
.three-fifths
.golden-large
.golden-small
Nested grids also work, but the markup gets gnarly pretty quickly.
Gridception!
★
Gridception!
★
★
Gridception!
★
★
★
★
★
You have two main options for using Gridism in your project.
Download the ZIP, extract the source code, and copy gridism.css into your project’s directory.
Of course, you could also clone the repository using your terminal, or even add it as a submodule of your project.
Once you’ve acquired the Gridism source code, there’s a couple of other things you’ll probably want to do.
Add the following stylesheet to the <head> section of your project’s HTML. If you didn’t use Bower, you may need to adjust the path to the CSS file to match your file structure.
<link rel="stylesheet" href="bower_components/gridism/gridism.css">Set the scale of your viewport to the width of the device. Placing the following tag in the <head> of your HTML ensures the viewport doesn’t load zoomed-out on mobiles and tablets.
<meta name="viewport" content="width=device-width,initial-scale=1">